<template>
  <vab-card
    :class="editableTabs.length >0 && editableTabs.length > 1 || 0 ? 'div_bank2' : 'div_bank1'"
    shadow="never"
  >
    <el-tabs
      type="border-card"
      v-model="editableTabsValue"
      :closable="editableTabs.length > 1 &&  route.query.type != 4"
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="(items,i) in editableTabs"
        :key="items.name"
        :label="items.title"
        :name="items.name"
        style="padding: 20px"
      >
        <template #label>
          {{ items.title }}
          <div  v-if="route.query.type != 4">
            <vab-icon
              icon="file-copy-2-line"
              style="margin-right: 4px; margin-left: 8px"
              @click="addTab(editableTabsValue)"
              title="复制"
            />
            <vab-icon icon="add-box-line" title="添加" @click="addTab(0)" />
          </div>
        </template>
        <el-form :model="base_formData[i]" :disabled = 'route.query.type == 4'>
        <el-row :gutter="24">
          <el-col
            v-for="(item, index) in items.content"
            :key="index"
            :xs="24"
            :sm="12"
            :md="12"
            :lg="8"
            :xl="8"
          >
<!--            <el-form-item :label="item.label" :prop="item.value" :rules="rules(item.value)">-->
            <el-form-item :label="item.label" :prop="item.value" >
              <el-input
                v-if="item.value != 'shipping_address' && item.value != 'is_default_consignee'"
                v-model.trim="item.item"
                @change="listValue(item.value, $event,items.name,i)"
              />
<!--              <el-tooltip
                v-if="route.query.type == 4 &&  item.value =='address' && item.item != ' '"
                placement="top"
                :content="item.item || '&#45;&#45;'"
              >
                <el-input
                  v-model.trim="item.item"
                  @change="listValue(item.value, $event,items.name)"
                />
              </el-tooltip>-->
              <el-cascader
                placeholder=" "
                ref="cascader"
                v-if="item.value == 'shipping_address'"
                v-model="item.item"
                :options="areaOption"
                style="width:100%"
                @change="listValue(item.value, $event,items.name,i)"
                :props="{ value: 'name', label: 'name' }"
              >
                <template #default="{ data }">
                  <span>{{ data.name }}</span>
                </template>
              </el-cascader>
              <el-radio-group
                v-if="item.value == 'is_default_consignee'&&route.query.type != 4"
                v-model="item.item"
                @change="listValue(item.value, $event,items.name,i)"
              >
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
              <span style="color:rgb(168, 171, 178);margin-left: 10px " v-if="item.value == 'is_default_consignee'  &&route.query.type == 4" >
            {{item.item == 0 ?'否':'是'}}
          </span>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </vab-card>
</template>
<script lang="ts" setup>
  defineOptions({
    name: 'AddRessMode',
  })
  import {
    areaOptions,
  } from '/@/views/corpManagement/corpCustomers/tools'
  import { ref,defineEmits } from 'vue'
  const cascader:any = ref(null)
  const route:any = useRoute() //route.query.id
  const props = defineProps(['base_formDatas'])
  const emit = defineEmits(['update:base_formDatas'])
  const base_formData = reactive<any>(props.base_formDatas)
  const editableTabsValue = ref(base_formData && base_formData[0]?.id || 1)
  const editableTabs = ref(
    base_formData.length > 0 && base_formData?.map((item: any, index: any) => {
      return {
        title: `收货地址信息 ${index == 0 ? '' : index}`,
        name: item.id,
        content: [
          { label: '收货联系人', value: 'shipping_contact', item: item.shipping_contact },
          {
            label: '联系电话',
            value: 'shipping_tel',
            item: item.shipping_tel,
          },
          {
            label: '收货地址',
            value: 'shipping_address',
            item: item.shipping_address.split(","),
          },
          {
            label: '详细地址',
            value: 'address',
            item: item.address,
          },
          {
            label: '默认收货地址',
            value: 'is_default_consignee',
            item: item.is_default_consignee,
          },
        ],
      }
    }) || []
  )
  let tabIndex = props.base_formDatas && props.base_formDatas.length || 1
  const areaOption = ref<any>([])
  onMounted(async ()=>{
    areaOption.value = await areaOptions()
  })
  const addTab = (targetName: number) => {
    const newTabName: any = `${++tabIndex}`
    if (targetName == 0) {
      editableTabs.value.push({
        title: `收货地址信息 ${newTabName - 1}`,
        name: String(new Date().getTime()).slice(-6),
        content: [
          { label: '收货联系人', value: 'shipping_contact', item: '' },
          {
            label: '联系电话',
            value: 'shipping_tel',
            item: '',
          },
          {
            label: '收货地址',
            value: 'shipping_address',
            item: '',
          },
          {
            label: '详细地址',
            value: 'address',
            item: '',
          },
          {
            label: '默认收货地址',
            value: 'is_default_consignee',
            item: 0,
          },
        ],
      })
      editableTabsValue.value = newTabName
      props.base_formDatas.push(
        {
          shipping_contact: '',
          shipping_tel: '',
          shipping_address: '',
          address:'',
          is_default_consignee:0,
          id: String(new Date().getTime()).slice(-6),
        })
    } else {
      const assignment = editableTabs.value.filter(
        (tab: any) => tab.name == targetName
      )[0]
      // const newTabName: any = `${++tabIndex}`
      editableTabs.value.push({
        title: `收货地址信息 ${newTabName - 1}`,
        name: String(new Date().getTime()).slice(-6),
        content: [
          { label: '收货联系人', value: 'shipping_contact', item: assignment.content[0].item },
          {
            label: '联系电话',
            value: 'shipping_tel',
            item: assignment.content[1].item,
          },
          {
            label: '收货地址',
            value: 'shipping_address',
            item: assignment.content[2].item,
          },
          {
            label: '详细地址',
            value: 'address',
            item: assignment.content[3].item,
          },
          {
            label: '默认收货地址',
            value: 'is_default_consignee',
            item: 0,
          },
        ],
      })
      editableTabsValue.value = newTabName
     /* $emits('update:base_formDatas', [
        ...props.base_formDatas,
        {
          shipping_contact: '',
          shipping_tel: '',
          address_code: '',
          address:'',
          is_default_consignee:'',
          id: newTabName,
        },
      ])*/
      props.base_formDatas.push(
        {
          shipping_contact: assignment.content[0].item,
          shipping_tel: assignment.content[1].item,
          shipping_address: assignment.content[2].item,
          address:assignment.content[3].item,
          is_default_consignee:0,
          id: String(new Date().getTime()).slice(-6),
        })
    }
  }
  const removeTab = (targetName: string, ab: any) => {
    const tabs = editableTabs.value
    let activeName: any = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab: any, index: any) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
    editableTabsValue.value = activeName
    editableTabs.value = editableTabs.value.filter(
      (tab: any) => tab.name !== targetName
    )
    const index = props.base_formDatas.findIndex((item:any) => item.id === targetName);
    if (index !== -1) {
      props.base_formDatas.splice(index,1)
    }

  }
  const listValue = (va: any, e: any,id_number:any,index:any) => {
    if(va =='shipping_address' ){
      props.base_formDatas.map((item: any) => {
        if (item.id === id_number) {
          return (item[va] = e.toString())
        } else {
          return {
            ...item,
          }
        }
      })
    } else if ( va == 'is_default_consignee'){
      if(e == 1){
        props.base_formDatas.map((item: any) => {
          if (item.id === id_number) {
            return (item[va] = e)
          } else {
            return (item[va] = 0)
          }
        })
        editableTabs.value = editableTabs.value.map((i:any)=>{
          if(i.name  != id_number ){
              return{
                ...i,
                content: i.content.map((va:any)=>{
                  if(va.value == 'is_default_consignee'){

                    return{
                      ...va,
                      item: 0
                    }
                  }else {
                    return {
                      ...va
                    }
                  }
                })
              }
          }else {
            return {
              ...i,
            }
          }
        })
      }else {
        props.base_formDatas.map((item: any) => {

          if (item.id === id_number) {
            return (item[va] = e)
          } else {
            return {
              ...item,
            }
          }
        })
      }
    }else {
      props.base_formDatas.map((item: any) => {

        if (item.id === id_number) {
          return (item[va] = e)
        } else {
          return {
            ...item,
          }
        }
      })
    }
  }
  const rules = (va:any)=>{
    if(va== 'shipping_tel'){
      return  [
        { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/, message: '请输入正确的手机号', trigger: 'blur' }
      ]
    }
  }
</script>
<style lang="scss" scoped>
.div_bank1 {
  :deep() {
    .el-tabs__content{
      padding: 0;
    }
    .el-tab-pane{
      padding-bottom: 0px !important;
    }
    .el-tabs__nav {
      width: 100% !important;
    }
    .el-tabs__item {
      display: flex;
      justify-content: space-between;
      width: 100% !important;
      padding: 10px 20px !important;
      height: 45px;
    }
    .el-tabs__item:hover {
      color: #000;
    }
    .el-tabs__item.is-active {
      cursor: default;
      color: #000;
      &:hover{
        color:  #000;
      }
    }
    .el-tabs__active-bar {
      height: 0px;
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
    .el-card__body {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-top: 0 !important;
    }
    .el-tabs--border-card{
      border: 0px solid #fff !important;
    }
    .el-tabs__nav{
      border-bottom:1px solid #eee ;
    }
    .is-active{
      border-right: 0px solid #eee;
    }
  }
}

.div_bank2 {
  :deep() {
    .el-tabs__content{
      padding: 0;
    }
    .el-tab-pane{
      padding-bottom: 0px !important;
    }
    .el-tabs__item {
      padding: 10px 20px !important;
      height: 45px;
    }
    .el-tabs__nav-next,
    .el-tabs__nav-prev {
      line-height: 61px;
    }
    /* .el-tabs__item:hover {
      color: #000;
    }
    .el-tabs__item.is-active {
      color: #000;
    }*/
    .el-tabs__active-bar {
      height: 0px;
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
    .el-card__body {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-top: 0 !important;
    }
    .el-tabs--border-card{
      border: 0px solid #fff !important;
    }
    .el-tabs__nav{
      border-bottom:1px solid #eee ;
    }
  }
}
</style>
